import React, { Component } from "react";
import HTTP from "../../script/service";
import { Icon, Toast } from "antd-mobile";
import "./Registe.scss";

export default class Registe extends Component {
  constructor(props) {
    super(props);
    this.state = {
      param: {},
      codeText:'获取验证码',
      hasGet:false
    };
  }
  //文本值变更
  changeFormValue = e => {
    let { param } = this.state;
    param[e.target.name] = e.target.value;
    this.setState({
      param: param,
    });
  };
  //获取验证码
  getcode = () => {
    if(this.state.hasGet){
      Toast.offline("已发送验证码，请稍后再试.");
      return
    }
    const { param } = this.state;
    if (!param.account || param.account.length < 5) {
      Toast.offline("请输入手机号，11个字符长度.");
      return false;
    }
    var phone=param.account.replace(/\s/g, "");
    let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
    if(!regs.test(phone)){
      Toast.offline("请输入正确的手机号.");
    }
    Toast.loading("正在发送验证码...", 0);
    HTTP._sendSMS({
      account: param.account,
    }).then(res => {
      Toast.hide();
      if (res.code === 0) {
        this.setState({hasGet:true})
        Toast.success("发送成功，请注意短信查收");
        let count = 60
        let timer = 
        setInterval(()=>{
          this.setState({
            codeText:`${count}秒后重新获取`
          }) 
          count = count - 1
          if(count==0){
            clearInterval(timer)
            this.setState({
              codeText:'获取验证码',
              hasGet:false
            })
          }       
        },1000)
      } else {
        Toast.fail(res.message);
      }
    });
    
  }
  //注册
  submitForm = () => {
    const { param } = this.state;
    if (!param.account || param.account.length < 5) {
      Toast.offline("请输入手机号，11个字符长度.");
      return false;
    }
    if (!param.code || param.code.length != 6) {
      Toast.offline("请输入验证码，6个字符长度.");
      return false;
    }
    if (!param.pwd || param.pwd < 6) {
      Toast.offline("请输入密码，6-15个字符长度.");
      return false;
    }
    if (param.pwd !== param.pwd1) {
      Toast.offline("两次密码输入不一致.");
      return false;
    }
    Toast.loading("正在注册账号...", 0);
    HTTP._registe({
      account: param.account,
      pwd: param.pwd,
      code:param.code,
      dept_id:1
    }).then(res => {
      Toast.hide();
      if (res.code === 0) {
        Toast.success("恭喜，账号注册成功", 2, () => {
          this.props.history.push("/login");
        });
      } else {
        Toast.fail(res.message);
      }
    });
  };
  goBack = () => {
    this.props.history.goBack();
  };
  render() {
    return (
      <div className="page-login">
        <div className="line-nav">
          <span className="reback">
            <Icon type="left" size="lg" onClick={this.goBack} />
          </span>
          <h3>用户注册</h3>
        </div>
        <div className="login-form">
          <div className="form-row">
            <label>手机号</label>
            <input
              type="text"
              name="account"
              placeholder="请输入手机号"
              maxLength="11"
              onChange={this.changeFormValue}
            />
            <label onClick={()=>this.getcode()}>{this.state.codeText}</label>
          </div>
          <div className="form-row">
            <label>验证码</label>
            <input
              type="text"
              name="code"
              placeholder="请输入验证码"
              maxLength="6"
              onChange={this.changeFormValue}
            />
          </div>
          <div className="form-row">
            <label>密码</label>
            <input
              type="password"
              name="pwd"
              placeholder="请输入密码"
              maxLength="15"
              onChange={this.changeFormValue}
            />
          </div>
          <div className="form-row">
            <label>确认密码</label>
            <input
              type="password"
              name="pwd1"
              placeholder="请输入密码"
              maxLength="15"
              onChange={this.changeFormValue}
            />
          </div>
          <button onClick={this.submitForm}>立即注册</button>
        </div>
        <div className="login-footer">2017-2021 @ All Rights Reservd By 阅知</div>
      </div>
    );
  }
}
